<template>
	<view class="components-collapse tn-safe-area-inset-bottom">


		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed :isBack="false" :bottomShadow="false" backgroundColor="#FFFFFF">
			<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
				<!-- 图标logo -->
				<view class="custom-nav__back" @click="goBack()">
					<view class="custom-nav__search__icon tn-icon-left tn-color-gray"></view>

				</view>
				<!-- 搜索框 -->
				<view class="custom-nav__search tn-flex tn-flex-col-center tn-flex-row-center" @click="">
					<view class="custom-nav__search__box tn-flex tn-flex-col-center tn-flex-row-left"
						style="background-color: rgba(230,230,230,0.3);">
						<view class="custom-nav__search__icon tn-icon-search tn-color-gray"></view>
						<view class="custom-nav__search__text tn-padding-left-xs tn-color-gray"> 
							<tn-input placeholder="一些信息" name="input" v-model="keyword" inputAlign="left"
								@input="loadDate(0,100,0)"></tn-input>
						</view>
					</view>
				</view>
			</view>
		</tn-nav-bar>
		<view class="" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
			<view v-if="content.length !=0">
				<view class="" v-for="(item,index) in content">
					<view class="tn-flex tn-flex-col-top tn-margin tn-cat-shadow tn-padding">
						<view class="tn-padding-left-sm" style="width: 100%;" @click="toInfo(item)">
							<view class="tn-flex tn-flex-row-between tn-flex-col-between">
								<view class="justify-content-item">
									<text class="tn-color-cat tn-text-lg tn-text-bold">{{item.name}}</text>
								</view>
								<view class="justify-content-item tag">
							
									
									<text class="tn-icon-time tn-padding-right-xs tn-text-df"></text>
									<text class="tn-text-sm">{{item.time}}</text>
								</view>
							</view>
							<view class=" tn-padding-top-xs  tn-text-ellipsis-2">
								<text class="tn-color-gray">{{item.content}}</text>
							</view>
							<view class="tn-flex tn-flex-row-between tn-flex-col-between tn-margin-top-sm">
								<view class="justify-content-item tn-round tn-text-xs " style="padding: 5rpx 15rpx;">
									<!-- <text class="tn-padding-right-xs">#</text> 公 告 -->
								</view>
								<view class="justify-content-item tn-color-gray tn-text-center tn-color-gray">
									<!-- {{item.role}} -->
									<text class="blogger__count-icon tn-icon-footprint">&nbsp;</text>
									<text class="tn-padding-right"> &nbsp;{{item.readNum}} </text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="content.length ==0">
				<view class="tn-text-center" style="font-size: 200rpx;padding-top: 30rpx;">
				  <text class="tn-icon-wea-wind tn-color-gray--light"></text>
				</view>
				<view class="tn-color-gray--disabled tn-text-center tn-text-lg">世界暂时和平</view>
			</view>

		</view>
	</view>
</template>

<script setup>
	import request from '@/common/request.js'
	export default {
		name: 'TemplateEdit',
		mixins: [],
		data() {
			return {
				content: [],
				keyword:'',
				pageNum: 1,
				pageSize: 100
			}
		},
		onLoad() {

		},
		mounted() {
			this.loadDate();
		},
		methods: {
			// 跳转
			tn(e) {
				uni.navigateTo({
					url: e,
				});
			},
			toInfo(data) {
				request.get("/xcx/black/readNum/"+data.id).then((res) => {
					uni.navigateTo({
						url: "/messagePages/viewBlackInfo?info=" + JSON.stringify(data),
					});
				});
				
			},
			goBack() {
				// 通过判断当前页面的页面栈信息，是否有上一页进行返回，如果没有则跳转到首页
				const pages = getCurrentPages()
				if (pages && pages.length > 0) {
					const firstPage = pages[0]
					if (pages.length == 1 && (!firstPage.route || firstPage.route != 'pages/index')) {
						uni.reLaunch({
							url: '/pages/index'
						})
					} else {
						uni.navigateBack({
							delta: 1
						})
					}
				} else {
					uni.reLaunch({
						url: '/pages/index'
					})
				}
			},
			loadDate() {
				request.get("/xcx/black/list", {
					state: '2',
					type: this.current,
					keyword: this.keyword,
					pageNum: this.pageNum,
					pageSize: this.pageSize,
				}).then((res) => {
					this.list = [];
					let result = [];
					let arrayData = res.rows;
					for (let i = 0; i < arrayData.length; i++) {
						let temp = arrayData[i];
						let resTemp = new Array();
						console.log(temp.imgs)
						if (temp.imgs != null) {
							let tempImg = temp.imgs.split(',');
							for (let z = 0; z < tempImg.length; z++) {
								resTemp.push(request.getBaseUrl() + tempImg[z]);
							}
							temp['imgs'] = resTemp;
							temp['imgsSize'] = resTemp.length;
						}
						temp.avatar = request.getBaseUrl() + temp.avatar;
						result.push(temp);
					}
					this.content = result;
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	.template-edit {}



	/* 自定义导航栏内容 start */
	.custom-nav {
		margin-top: 1%;
		height: 100%;

		&__back {
			margin: auto 5rpx;
			font-size: 40rpx;
			margin-right: 10rpx;
			margin-left: 30rpx;
			flex-basis: 5%;
		}

		&__search {
			flex-basis: 60%;
			width: 100%;
			height: 100%;

			&__box {
				width: 100%;
				height: 70%;
				padding: 10rpx 0;
				margin: 0 30rpx;
				border-radius: 60rpx 60rpx 0 60rpx;
				font-size: 24rpx;
			}

			&__icon {
				padding-right: 10rpx;
				margin-left: 20rpx;
				font-size: 30rpx;
			}

			&__text {
				// color: #AAAAAA;
			}
		}
	}

	.logo-image {
		width: 65rpx;
		height: 65rpx;
		position: relative;
		border: 1rpx solid #F8F7F8;
		border-radius: 50%;
	}

	.logo-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border-radius: 50%;
	}

	/* 自定义导航栏内容 end */
</style>

<style lang="scss" scoped>
	.message {
		max-height: 100vh;
	}



	/* 底部安全边距 start*/
	.tn-tabbar-height {
		min-height: 120rpx;
		height: calc(140rpx + env(safe-area-inset-bottom) / 2);
		height: calc(140rpx + constant(safe-area-inset-bottom));
	}

	.tn-message-fixed {
		position: fixed;
		background-color: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
		top: 0;
		width: 100%;
		transition: all 0.25s ease-out;
		z-index: 100;
	}



	/* 图标容器1 start */
	.icon1 {
		&__item {
			width: 30%;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			padding: 30rpx;
			margin: 20rpx 10rpx;
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 90rpx;
				height: 90rpx;
				font-size: 60rpx;
				border-radius: 50%;
				margin-bottom: 18rpx;
				position: relative;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;
					background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg5.png);
				}
			}
		}
	}

	.tn-color-cat {
		color: #1D2541;
	}

	/* 页面阴影 start*/
	.tn-cat-shadow {
		border-radius: 15rpx;
		box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	}


	/* 标签*/
	.tag {
		margin: 10rpx 0 10rpx 10rpx;
		color: #7C8191;
		background-color: #F3F2F7;
		padding: 4rpx 14rpx 6rpx;
		border-radius: 10rpx;
		font-size: 20rpx;
	}

	/* 图标容器15 start */
	.icon15 {
		&__item {
			width: 30%;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			padding: 30rpx;
			margin: 20rpx 10rpx;
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 105rpx;
				height: 105rpx;
				font-size: 60rpx;
				border-radius: 50%;
				margin-bottom: 18rpx;
				position: relative;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;


				}
			}
		}
	}
</style>